<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2024-01-09 19:01:10
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-02-01 10:07:31
 * @FilePath: \My-bolg\My_Blog\src\components\404page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="errorpage">
        <div class="info">
            <h1>您访问的页面不存在,请查看地址输入是否正确!</h1>
            <h1>{{ time }}秒后将自动跳转 <button @click="toHome" class="button">点我回首页</button> </h1>
        </div>
        <img src="@/assets/img/404.png" style="margin-top:10%">
    </div>
</template>

<script setup>

import { computed, ref ,onBeforeUnmount } from 'vue';
import { useRouter  } from 'vue-router'
var time = ref(5);
const Router = useRouter();
/* 返回首页 */
function toHome() {
    Router.push('/home');
}
/* 倒计时 */
var timer = setInterval(() => {
    if (time.value > 0) {
        time.value--;
    } else {
        timer && clearInterval(timer);
        toHome();
    }
}, 1000)
onBeforeUnmount(() => {
    timer && clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.errorpage {
    height: 99vh;
    width: 99vw;
    position: relative;
    text-align: center;
}

.errorpage>.info {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 60vw;
}

.errorpage .info h1 {
    margin: 10px;
    font-weight: 300;
}

img {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 50vh;
    width: 50vh;
}
.button {
    font-size: large;
    @include userTheme{
        font-family: getThemeValue("fontfamily");
    }
   
	padding: 5px;
    border: 0;
    border-radius: 1vmax;
    font-size: 1vmax;
    color: white;
    background-image: linear-gradient(to bottom, #57b, #148);
    box-shadow: 0.1em 0.1em 0.5em #124;
}
.button:active {
	box-shadow: inset 0 0 0.5em #124, inset 0 0.5em 1em rgba(0,0,0,0.4);
}
@media only screen and (max-width: 650px){
    img {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 50vh;
    width: 50vh;
}
}
</style>